<!DOCTYPE html>
<html>
<head>
<style>
	* { margin:0; padding:0; font:12px/1 'Trebuchet MS'; }
	h1 { font-weight:bold; border-top:2px solid gray; }
	.table { display:table; border-spacing:5px; border:5px solid black; background:khaki; }
	.tr { display:table-row; }
	.td { display:table-cell; border:2px solid navy; background:mistyrose; padding:2px; }
	.thead { display:table-header-group; }
	.tbody { display:table-row-group; }
	.tfoot { display:table-footer-group; }
	.caption { display:table-caption; }
	.col { display:table-column; }
	.colgroup { display:table-column-group; }
</style>
</head>
<body>
<div class="table">
	<div class="tr">
		<div class="td">table-cell</div>
		<div class="td">table-cell</div>
	</div>
	<div class="tr">
		<div class="td" style="position:relative; left:30px; top:20px; background:lightskyblue;">table-cell</div>
		<div class="td">table-cell</div>
	</div>
	<div class="tr">
		<div class="td">table-cell</div>
		<div class="td">table-cell</div>
	</div>
</div>
<br />
<div class="table">
	<div class="tr">
		<div class="td">table-row</div>
		<div class="td">table-row</div>
	</div>
	<div class="tr" style="position:relative; left:30px; top:20px;">
		<div class="td" style="background:lightskyblue;">table-row</div>
		<div class="td" style="background:lightskyblue;">table-row</div>
	</div>
	<div class="tr">
		<div class="td">table-row</div>
		<div class="td">table-row</div>
	</div>
</div>
<br />
<div class="table">
	<div class="thead" style="position:relative; left:80px; top:20px;">
		<div class="tr">
			<div class="td" style="background:lightskyblue;">table-header-group</div>
		</div>
	</div>
</div>
<br />
<div class="table">
	<div class="tbody" style="position:relative; left:80px; top:20px;">
		<div class="tr">
			<div class="td" style="background:lightskyblue;">table-row-group</div>
		</div>
	</div>
</div>
<br />
<div class="table">
	<div class="tfoot" style="position:relative; left:80px; top:20px;">
		<div class="tr">
			<div class="td" style="background:lightskyblue;">table-footer-group</div>
		</div>
	</div>
</div>
<br />
<div class="table">
	<div class="caption" style="position:relative; left:80px; top:20px; background:lightskyblue;">table-caption</div>
	<div class="tr">
		<div class="td">table-caption</div>
	</div>
</div>
<br />
<div class="table">
	<div class="col" style="position:relative; left:200px;"></div>
	<div class="tr">
		<div class="td">table-column</div>
		<div class="td">table-column</div>
	</div>
</div>
<br />
<div class="table">
	<div class="colgroup" style="position:relative; left:200px;">
		<div class="col"></div>
	</div>
	<div class="tr">
		<div class="td">table-column-group</div>
		<div class="td">table-column-group</div>
	</div>
</div>
</body>
</html>